<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title">消息中心</div>
            </div>
        </div>

        <van-tabs v-model="active" :swipe-threshold="5" :border="true" color="#2C8DFF" @click="onChoose">
            <van-tab title="降价">
                <van-row class="page-block">
                    <div class="list-cell no-border">
                        <template v-for="(item,index) in cut_list">
                            <div class="media-list list-mini">
                                <router-link :to="{name:'buyDetail',query:{id:item.id}}">
                                    <van-image fit="cover" class="media-list-logo pull-left" lazy-load
                                               :src="img(item.series_thumb,item.head_img)">
                                        <template v-slot:loading>
                                            <van-loading type="spinner" size="20"/>
                                        </template>
                                    </van-image>
                                </router-link>
                                <div class="media-list-body pull-left">
                                    <router-link :to="{name:'buyDetail',query:{id:item.id}}"
                                                 class="media-list-text-top">{{item.car_name}}
                                    </router-link>
                                    <div class="media-list-text-tps">
                                        {{stampToDate(item.card_time,2)}}/{{item.mileage}}万公里
                                    </div>
                                    <div class="media-list-text-bottom">
                                        <span class="pull-left">{{item.price}}万</span>
                                        <div class="pull-right bottom-right" v-if="item.price<item.old_price">已降<span
                                                class="blue">{{item.old_price-item.price}}</span>万
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--广告-->
                            <van-swipe class="ad-box" :autoplay="5000" indicator-color="white" v-if="index==2">
                                <van-swipe-item v-for="(image, index) in adImg" :key="index">
                                    <van-image class="img" lazy-load :src="image">
                                        <template v-slot:loading>
                                            <van-loading type="spinner" size="20"/>
                                        </template>
                                    </van-image>
                                </van-swipe-item>
                            </van-swipe>
                            <!--广告end-->
                        </template>
                    </div>
                </van-row>
            </van-tab>
            <van-tab title="留言">
                <van-row class="page-block">
                    <div class="list-cell no-border">
                        <div class="media-list list-mini" v-for="(item,index) in message_list">
                            <div class="msg-header">您发布的车辆：</div>
                            <router-link :to="{name:'buyDetail',query:{id:item.id}}">
                                <van-image fit="cover" class="media-list-logo pull-left" lazy-load
                                           :src="img(item.series_thumb,item.head_img)">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </router-link>

                            <div class="media-list-body pull-left">
                                <router-link :to="{name:'buyDetail',query:{id:item.id}}" class="media-list-text-top">
                                    {{item.car_name}}
                                </router-link>
                                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}万公里
                                </div>
                                <div class="media-list-text-bottom">
                                    <span class="pull-left">{{item.price}}万</span>
                                </div>
                            </div>
                            <div class="msg-footer pull-left">
                                <div class="msg-footer-list" v-for="i in item.list">

                                    <template v-if="i.cat=='msg'">
                                        <div class="list-title">被用户【{{i.mobile}}】留言</div>
                                        <div class="list-body">
                                            {{i.content}}
                                            <router-link class="more" :to="'/detail?id='+item.id+'#'+i.msg_id">查看详情
                                            </router-link>
                                        </div>
                                    </template>

                                    <template v-if="i.cat=='good'">
                                        <div class="list-title">被用户【{{i.mobile}}】点赞</div>
                                    </template>

                                    <template v-if="i.cat=='collect'">
                                        <div class="list-title">被用户【{{i.mobile}}】收藏</div>
                                    </template>

                                </div>
                            </div>
                        </div>
                    </div>

                </van-row>
            </van-tab>
            <van-tab title="系统">
                <van-row class="page-block">
                    <div class="list-cell no-border">
                        <div class="media-list list-mini" v-for="(item,index) in sys_list">
                            <div class="msg-header">{{item.title}}</div>

                            <div class="msg-footer">
                                <div class="msg-footer-list" style="margin-top: 0">
                                    <div class="list-body" style="margin-top: 0">{{item.content}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </van-row>
            </van-tab>
            <van-tab title="订阅">
                <book v-if="isBook"></book>
            </van-tab>
            <van-tab title="客服" :to="{name:'publicSvr'}"></van-tab>
        </van-tabs>

        <div class="red-tps m1" v-if="countInfo.carMsgCount>0">{{countInfo.carMsgCount}}</div>
        <div class="red-tps m2" v-if="countInfo.sysCount>0">{{countInfo.sysCount}}</div>

        <infinite-loading :on-infinite="onLoad" ref="inLoading" v-if="!isBook">
            <div slot="no-results" class="no-more">没有更多了～</div>
            <div slot="no-more" class="no-more">没有更多了～</div>
        </infinite-loading>

    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import book from './msg_user_book'

    export default {
        name: "user_message",
        components: {
            InfiniteLoading,
            book,
        },
        data() {
            return {
                select: 0, //0降价1留言
                cut_list: [],
                cut_page: 1,
                //消息
                message_list: [],
                message_page: 1,
                active: 0,
                adImg: [
                    'https://cdn.decorpad.com/photos/2019/01/21/black-tree-canopy-bed.jpg',
                    'https://cn.fresh.com/on/demandware.static/-/Sites-fresh-cn-Library/zh_CN/dw73fbac03/ROYKBC-PC.jpg'
                ],

                sys_list: [],
                sys_page: 1,

                index: 0,

                isBook: false,

                countInfo: {
                    'sysCount': 0,
                    'carMsgCount': 0,
                }
            }
        },
        computed: {},
        mounted: function () {
            this.getCount();
        },
        methods: {
            onLoad($state) {
                if (this.index == 0) {
                    this.getCutPrice($state);
                }

                if (this.index == 1) {
                    this.getMessage($state);
                }

                if (this.index == 2) {
                    this.getSysMsgs($state);
                }
            },

            getCutPrice($state) {
                let that = this;
                this.$api.msg.getCutPrice(this.cut_page).then(res => {
                    res = res.data;
                    if (res.data.data.length) {
                        that.cut_list.push(...res.data.data);
                        that.cut_page++;
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                })
            },
            getMessage($state) {
                let that = this;
                this.$api.msg.getMessage(this.message_page).then(res => {
                    res = res.data;
                    if (res.data.length) {
                        that.message_list.push(...res.data);
                        that.message_page++;
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                })
            },

            getSysMsgs($state) {
                let that = this;
                this.$api.index.getSysMsg(this.sys_page).then(res => {
                    res = res.data;
                    if (res.data.data.length) {
                        that.sys_list.push(...res.data.data);
                        that.sys_page++;
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                })
            },

            onChoose(even) {
                this.index = even;

                if (even == 3) {
                    this.isBook = true;
                } else if (even < 3) {
                    this.isBook = false;
                    this.sys_list = [];
                    this.sys_page = 1;

                    this.message_list = [];
                    this.message_page = 1;

                    this.cut_list = [];
                    this.cut_page = 1;

                    this.$nextTick(() => {
                        this.$refs.inLoading.$emit('$InfiniteLoading:reset');
                    });
                }
            },

            getCount() {
                this.$api.car.getMsgCount().then(res => {
                    var res = res.data;
                    this.countInfo = res.data;
                });
            },
        },

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
